<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript" src="scripts/canvasjs.js"></script>
<script type="text/javascript">

var chatClient = new WebSocket("ws://localhost:8080/websocket.app/mem");
var xVal = 0;
var yVal = 100;	
var updateInterval = 1000;
var dataLength = 300; // number of dataPoints visible at any point
var chart;

var updateChart = function (count) {
	// count is number of times loop runs to generate random dataPoints.
	
	for (var j = 0; j < count; j++) {	
		yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
		updateChartWithPoint(xVal, yVal);
		xVal++;
	};

};

var updateChartWithPoint = function(xVal, yVal) {
	dps.push({
		x: xVal,
		y: yVal,
	});
	
	if (dps.length > dataLength)
	{
		dps.shift();				
	}
	
	chart.render();	
}

chatClient.onmessage = function(evt) {
	var obj = JSON.parse(evt.data);
	//var date = new Date;
	updateChartWithPoint(xVal++, obj.mem);
}
window.onbeforeunload=function(e){
	chatClient.close();
}

	var dps = []; // dataPoints

	window.onload = function () {


	chart = new CanvasJS.Chart("chartContainer",{
		title :{
			text: "JVM Mem Stat"
		},			
		data: [{
			type: "line",
			dataPoints: dps 
		}]
	});

	

	
	// generates first set of dataPoints
	updateChart(1); 

	// update chart after specified time. 
	setInterval(function(){}, updateInterval); 

}
</script>

</head>
<body>
	<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

